<style>
@charset "utf-8";
body{
    font-size:12px;
    /* [disabled]color:#000000; */
}
ul,li{ margin:0px;padding:0px;list-style:none;}

#main{ width:607px;margin:15% auto;overflow:hidden}

#header{height:38px;overflow:hidden;}
#header ul li{ width:auto; height:38px; float:left; margin-right:2px;  padding-left:15px;  background:url(../images/bg1.gif) no-repeat 0 -42px; line-height:40px; }
#header ul li span{  height:38px; line-height:38px; float:left;  padding-right:15px; background:url(../images/bg1.gif) no-repeat right -42px;}
#header ul .current { position:relative;background-position: 0 0; z-index:999; }
#header ul .current span {background-position: right 0; }


#bodyer { position:relative; z-index:99; margin-top:-1px; }
#bodyer .v_content{  position:relative;height:150px; overflow:hidden; width:605px;}
#bodyer .piclist{ width:120px; height:150px;float:left;padding:0px 14px 5px 14px;margin-top: 0px;}
#bodyer p{ font:Verdana, Geneva, sans-serif; font-size:12px;}
.v_content ul {float:left;}
.v_content ul li { display:inline;float:left; }
.v_content ul li img{ margin-bottom: 12px;}
.v_content ul li a{ margin-top:12px;}

.clear{clear:both;font-size:0px;overflow:hidden;height:0px;}

div.con1{clear:left;width:300px;height:100px;padding:10px;display:none; }
div.div1{ display:inline; position:absolute; width:2500px;top:0px; left:0px;}


div.changebtn { clear:left; margin-left:480px; width:120px;cursor:pointer;}
div.changebtn span{ width:50px; margin-right:10px; background-color:#9C0;}


#footer{width:607px;height:6px;overflow:hidden;}

#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;z-index:9999;}

</style>
<div id="main">
    
    <div id="bodyer" class="v_show" style=" border:#CCC solid 1px; width:605px; border-bottom-color:#FFF;">
        <div class="v_content">
            <div class="div1 con1">
                <ul>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initfloor.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initfloor2.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/floorwood002.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initwall.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initwall2.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initfloor.jpg"></a></li>
                    <li class="piclist"><a  href="obj/wall/initfloor.jpg" class="preview"><img src="obj/wall/initfloor2.jpg"></a></li>
                </ul>
            </div>
        </div>
        <div class="changebtn">
               <span class="prev">上一页</span>
            <span class="next">下一页</span>
           </div>
        <div class="clear"></div>
    </div>
    <script type="text/javascript" src="/room3/js/jquery-1.7.1.min.js"></script>
    <script>
    	$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
         var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
         var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
         var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
         var v_width = $v_content.width()/i ;
         var len = $v_show.find("li").length;
         if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
              if( page ==len ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
                page = 1;
                }else{
                $v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
                page++;
             }
         }
         $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   });
    //往前 按钮
    $("span.prev").click(function(){
         var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
         var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
         var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
         var v_width = $v_content.width()/i;
         var len = $v_show.find("li").length;
         if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
              if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
                page = page_count;
            }else{
                $v_show.animate({ left : '+='+v_width }, "slow");
                page--;
            }
        }
        $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
});


</script>
    	
